<script setup>
import { ref } from "vue";
import axios from "@/plugins/axios.js";
import { ElMessage } from "element-plus";

const userList = ref({});
const getUserInfo = () => {
  axios.get("/api/auth/getUserInfo").then((res) => {
    if (res.data.code === 200){
      userList.value = res.data.data;
      console.log(userList.value)
    }else {
      ElMessage.error(res.data.message)
    }
  })
}
getUserInfo()
</script>

<template>
  <span style="margin-left: 20px">个人中心</span>
    <el-row style="margin-top: 10px">
        <el-col :lg="14" :xs="24" >
          <el-card shadow="hover" class="card">
            <div slot="header" class="clearfix">
                <h4>个人账号</h4>
              <el-divider/>
              <el-text style="margin-left: 10%">登录账号 <span style="margin-left: 20%">{{userList.username}}</span> </el-text>
              <br>
              <br>
              <el-text style="margin-left: 10%">手机号码 <span style="margin-left: 20%">{{userList.phone}}</span> </el-text>
              <br>
              <br>
              <el-text style="margin-left: 10%">注册时间 <span style="margin-left: 20%">{{userList.createTime}}</span> </el-text>
              <br>
              <br>
              <el-text style="margin-left: 10%">账户余额 <span style="margin-left: 20%">0</span> </el-text>
            </div>
          </el-card>
        </el-col>
        <el-col :lg="9" :xs="23" style="margin-left: 1%">
            <el-card shadow="hover" class="card">
                <h4>最新公告</h4>

              <el-text>各位用户大家好，为了提升客户服务的质量和效率，我们已开通群组频道和在线客服。
                <br>
                <br>
                TG用户群组: <a href=""></a><br>
                TG通知频道: <a href=""></a><br>
                有任何问题咨询和反馈请发送至客服邮箱: support@creamdata.net<br><br>
                如有服务需续费，请点击服务列表后方的续费按钮，请勿在购买页面新购服务！
              </el-text>
              <br>
              <br>
              <el-tag>2024-6-1 00:00:00</el-tag>
            </el-card>
        </el-col>
    </el-row>
  <el-row>
    <el-col :lg="24" :xs="24" class="clearfix" >
      <el-card shadow="hover">
        <div slot="header">
          <h4>官方APP</h4>
          <el-divider/>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped>


@media screen and (max-width: 1700px) {
  .clearfix {
    margin-top: 20px;
  }
  .card{
    height: 335px;
  }
}

@media screen and (max-width: 375px) {

  .clearfix {
    margin-top: 20px;
  }
  .card{
    width: 100%;
  }
}

</style>